@extends('backstage.layout.master')
@section('title', '订单列表')
@section('style')
<!-- page specific plugin styles -->
<meta name="_token" content="{{csrf_token()}}"/>
<link rel="stylesheet" href="/assets/css/chosen.css"/>
<!-- fonts -->
<!-- echarts -->
@stop
@section('content')
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="#">主页</a>
            </li>

            <li class="active">
                <a href="backstage/order/order-list">订单</a>
            </li>
            <li>
                订单列表
            </li>
        </ul><!-- .breadcrumb -->
    </div>

    <div class="page-content">
        <div class="page-header">
            <h1>
                订单
                <small>
                    <i class="icon-double-angle-right"></i>
                    订单列表
                </small>
            </h1>
            <!-- <div class="nav-search" id="nav-search">

                <button id="outExcel" class="btn" onclick="createExcel();" data="{{isset($_SERVER['QUERY_STRING'])?$_SERVER['QUERY_STRING']:''}}">
                    导出订单
                </button>
                <a href="" id="downExcel" style="display:none;" download="">
                    下载
                </a>

            </div>#nav-search -->
        </div>
        <div class="row">

            <div class="nav-search col-xs-12" style="position: static;height: 50px;" id="nav-search">
                <select id="column2"  style="width:113px;">
                    <option value ="date_range_picker">时间段</option>
                </select>
                <textarea class="form-control" type="text" name="time_range" id="time_range" style="display: inline;width:70%">{{isset($_GET['time_range'])&&$_GET['time_range']!=''?$_GET['time_range']:''}}</textarea>
            </div><!-- #nav-search -->
            <div class="nav-search col-xs-12" style="position: static;height: 50px;" id="nav-search">
                <select id="column6">
                    <option value ="pay_type">支付类型</option>
                </select>
                <span class="input-icon">
                    <select id="pay_type"  style="width:209px;">
                        <option value =""></option>
                        <option value ="1" @if(isset($_GET['pay_type'])&&$_GET['pay_type']==1) selected="selected" @endif >微信</option>
                        <option value ="2" @if(isset($_GET['pay_type'])&&$_GET['pay_type']==2) selected="selected" @endif >支付宝</option>
                        <option value ="3" @if(isset($_GET['pay_type'])&&$_GET['pay_type']==3) selected="selected" @endif >优惠券</option>
                    </select>
                </span>
                <select>
                    <option value ="channel_id">活动</option>
                </select>
                <span class="input-icon" style="width: 209px;">
                    <select id="channel_id"  style="width:209px;">
                        <option value =""></option>
                        <option value ="kanjia20170310"
                        @if(isset($_GET['channel_id']) && $_GET['channel_id'] == 'kanjia20170310') selected="selected" @endif>
                            砍价活动(20170310)
                        </option>
                        <option value ="septwolves20170316"
                        @if(isset($_GET['channel_id']) && $_GET['channel_id'] == 'septwolves20170316') selected="selected" @endif>
                            七匹狼活动(20170316)
                        </option>
                    </select>
                </span>
                <button class="btn" onclick="loadData();" >
                    搜索
                </button>
            </div><!-- #nav-search -->
            <div class="col-xs-12">

                <div class="table-responsive" >
                    <div id="main" style="height:400px;">

                    </div>
                </div>


                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
@stop
@section('script')
<!-- <script src="js/calendar/bootstrap_calendar.js" cache="true"></script>
<script src="js/calendar/demo.js" cache="true"></script>
<script src="js/sortable/jquery.sortable.js" cache="true"></script>
<script src="js/parsley/parsley.min.js" cache="true"></script>
<script src="js/parsley/parsley.extend.js" cache="true"></script> -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    $(function(){
        loadData();
    });
    function loadData(){
        myChart.showLoading();
        var datas = getData();
        console.log(datas);
        myChart.hideLoading();
        var option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                // data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                data:['订单数','未支付','已支付','已完成','已取消','申请售后']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : (datas.title == undefined ? [] : datas.title)
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'订单数',
                    type:'line',
                    stack: '总量',
                    data:(datas.all == undefined ? [] : datas.all)
                },
                {
                    name:'未支付',
                    type:'line',
                    stack: '总量',
                    data:(datas.unpay == undefined ? [] : datas.unpay)
                },
                {
                    name:'已支付',
                    type:'line',
                    stack: '总量',
                    data:(datas.pay == undefined ? [] : datas.pay)
                },
                {
                    name:'已完成',
                    type:'line',
                    stack: '总量',
                    data:(datas.complete == undefined ? [] : datas.complete)
                },
                {
                    name:'已取消',
                    type:'line',
                    stack: '总量',
                    data:(datas.cancel == undefined ? [] : datas.cancel)
                },
                {
                    name:'申请售后',
                    type:'line',
                    stack: '总量',
                    data:(datas.aftermark == undefined ? [] : datas.aftermark)
                }
            ]
        };
        myChart.setOption(option);
    }
    function getData(){
        var data = httpPost();
        console.log(data);
        return data;
    }

    function httpPost(){
        var datas = {
            "time_range" : ($("#time_range").val() != undefined ? $("#time_range").val() : ''),
            "pay_type"   : ($("#pay_type option:selected").val() != undefined ? $("#pay_type option:selected").val() : ''),
            "channel_id" : ($("#channel_id option:selected").val() != undefined ? $("#channel_id option:selected").val() : '')
        };
        var result = {};
        $.ajax({
            async : false,
            url : "/backstage/order/order-statistics",
            type : "post",
            data : datas,
            datatype : "json",
            success:function(re){
                result = re;
            },
            error:function(){
                return {};
            }
        });
        return result;
    }
</script>
@stop
